<template>
  <div id="app">
    <!-- sku分类处理 3类划分为三行 -->
    <div v-for="(item, index) in mockData.json1" :key="index" class="row">
      <!-- 一行是 单个一类数据 -->
      <div v-for="(type, i) in item" :key="i">
        <!-- type是类型,index是操作的那个属性 -->
        <a class="btn" @click="changeCondition(type, index)">
          {{ type }}
        </a>
      </div>
    </div>

    <!-- 只有这里写了价格名称。分类1存在价格选项，我们就不会有这个price了 -->
    <input type="text" v-model="condition.price" />
    {{ showProducts }}
  </div>
</template>

<script>
//引入数据
import mockData from './data';
//公共对象对比方法
function diffObject(obj1, obj2) {
  //如果对比的两个对象中有一个没有传递 则抛出错误
  if (!obj1 || !obj2) throw new Error('必须传递两个对象');
  for (let key in obj1) {
    //如果用户没有选的属性我们就不进行对比
    if (obj1[key] && obj2[key]) {
      //做对比，如果两者值不同，认为返回false
      if (obj1[key] != obj2[key]) {
        return false;
      }
    }
  }
  return true;
}
export default {
  name: 'App',
  data() {
    return {
      mockData: {},
      //筛选的条件对象
      condition: {
        //太low了写死属性名
        // color: '红色',
        // type: 'S',
        // mianliao: '棉的',
        //价格是要展示的不写
        // price: 100,
      },
    };
  },
  computed: {
    showProducts() {
      //要返回过滤后的数据
      return this.mockData.json2.filter((prod) => {
        //把每个对象都和条件进行对比 通过公共方法diffObject
        return diffObject(prod, this.condition);
      });
    },
  },
  methods: {
    changeCondition(typeData, index) {
      //代码太多了，且字段写死了 不够灵活 要灵活的使用属性匹配
      // console.log(typeData, index);
      // switch (index) {
      //   case 0:
      //     this.condition.color = typeData;
      //     break;
      //   case 1:
      //     this.condition.type = typeData;
      //     break;
      //   case 2:
      //     this.condition.price = typeData;
      //     break;
      //   default:
      //     break;
      // }
      //---
      // //动态修改选中的状态，但是我们可以一行搞定
      // let propName = this.propNames[index];
      // this.condition[propName] = typeData;
      this.condition[this.propNames[index]] = typeData;
    },
  },
  created() {
    //模拟发请求 我们请求回来的数据后 不会再变化 可以通过Object.freeze优化
    this.mockData = Object.freeze(mockData);
    //我们要动态获取属性名
    //this.mockData.json2[0] 拿到一个规格对象
    let first = this.mockData.json2[0];
    //取出所有的属性名
    this.propNames = Object.keys(first);
    //初始值的赋值
    this.propNames.forEach((prop) => {
      //对象的数据关联语法属性名=属性值
      // this.condition[prop] = first[prop];
      //vue2中对象后续添加的属性不会动态改变我们要手动$set
      this.$set(this.condition, prop, first[prop]);
    });
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid grey;
    color: grey;
    cursor: pointer;
  }
}
</style>
